<script setup>
import { ref, provide, nextTick, computed } from "vue";
// 地图
import OperationMap from "@/components/maps/OperationMap.vue";
// 污水厂处理水量
import AmountChart from "@/components/charts/AmountChart.vue";
// 污水污染物成分分析
import QualityAnalyzeChart from "@/components/charts/QualityAnalyzeChart.vue";
// 各区污染物数据
import EachFoulQuality from "@/components/display/EachFoulQuality.vue";
// 考核排名
import RankingChart from "@/components/charts/RankingChart.vue";
// 样式-带边框的矩形
import OperationPanel from "@/components/myParts/OperationPanel.vue";
// 样式-头部
import MyHeader from "@/components/myParts/MyHeader.vue";
// 概览
import OperationOverview from "@/components/display/OperationOverview.vue";
// 请求数据
import {
  eachFoulPassingService /*泰安市各区 污水 达标率 排名*/,
  foulOverviewService /*整体 24h内 污水处理平均达标率，总处理水量，平均加药量*/,
  foulOverviewWeekService,
  eachFoulContentService /*泰安市 各区 污水 污染物含量 分析 */,
  foulContentService /*污染物分析*/,
  foulAmountService /*污水处理量*/,
} from "@/api/country.js";
import waterContent from "@/assets/waterContent/content.json";
import { xAxisFormatTime } from "@/utils/format.js";
import AreaOption from "@/components/form/AreaOption.vue";
import chinaAddress from "@/assets/address/data_geo.json";

// 其他子页面刷新
const isSonActive = ref(false);
const reload = () => {
  isSonActive.value = false;
  nextTick(() => {
    isSonActive.value = true;
  });
};
provide("reload", reload);

// 请求数据
const countryIds = ref([]);
const ranking = ref([]);
const initData = async () => {
  // 请求数据
  const res1 = await foulOverviewWeekService(countryIds.value);
  weekOverviewData.value = res1.data.data;
  const res2 = await foulOverviewService(countryIds.value);
  dayOverviewData.value = res2.data.data;
  const res3 = await eachFoulPassingService(countryIds.value);
  let rank = res3.data.data;
  const res4 = await foulAmountService(countryIds.value);
  amount.value = res4.data.data;
  const res5 = await eachFoulContentService(countryIds.value);
  eachContent.value = res5.data.data;
  const res6 = await foulContentService(countryIds.value);
  foulContent.value = res6.data.data;
  // 格式化数据
  /*达标率*/
  ranking.value.splice(0, ranking.value.length);
  for (const key in rank) {
    let a = {
      id: key,
      name: "",
      mark: (rank[key] * 1000).toFixed(2),
    };
    ranking.value.push(a);
  }
  /*水量*/
  let j = 0;
  amountArr.value.splice(0, amountArr.value.length);
  for (const key in amount.value) {
    let timeStr = xAxisFormatTime(key);
    let a = {
      time: timeStr,
      value: amount.value[key],
    };
    amountArr.value[j] = a;
    j++;
  }
  // 数据加载完，展示组件
  reload();
};

// 地区改变
const areaOptionRef = ref(null);
const mapRef = ref(null);
const areaChange = (area) => {
  // 设置参数
  let areaId = String(area.id);
  countryIds.value.splice(0, countryIds.value.length);
  chinaAddress.some((item) => {
    if (
      String(item.value).slice(0, 4) === areaId &&
      String(item.value).length == 6
    ) {
      countryIds.value.push(String(item.value));
    }
  });
  // 重新加载map
  mapRef.value.setPolygon(area.id);
  mapRef.value.initMap();
  // 加在图表数据
  initData();
};
provide("areaChange", areaChange);

// 展示数据
// 概览
const dayOverviewData = ref({
  totalAmount: 0.0,
  dosage: 0.0,
  passing: 0.0,
});
const weekOverviewData = ref({
  totalAmount: 0.0,
  dosage: 0.0,
  passing: 0.0,
});
// 排名
const sortedRanking = computed(() => {
  return ranking.value.sort((a, b) => {
    if (a.mark > b.mark) return -1;
    else if (a.rank < b.rank) return 1;
    else return 0;
  });
});
// 水量
const amount = ref({});
const amountArr = ref([]);
// 各区水质
const eachContent = ref([]);
// 水质分析
const foulContent = ref({});
</script>

<template>
  <el-container class="layout-container">
    <el-header>
      <my-header
        text="运维页面 - 数据总览"
        style="height: 100%; width: 100%"
      ></my-header>
    </el-header>
    <el-main>
      <div class="main">
        <div class="map-form">
          <operation-map ref="mapRef"></operation-map>
        </div>
        <div class="column">
          <div class="panel">
            <operation-panel title="各区（县）达标率排名">
              <div style="height: 92%">
                <ranking-chart
                  v-if="isSonActive"
                  :ranking="sortedRanking"
                ></ranking-chart>
              </div>
            </operation-panel>
          </div>
          <div class="panel">
            <operation-panel title="污水处理总量">
              <amount-chart
                v-if="isSonActive"
                :amount="amountArr"
              ></amount-chart>
            </operation-panel>
          </div>
        </div>
        <div class="column">
          <div class="panel">
            <operation-panel title="污染物统计">
              <each-foul-quality
                v-if="isSonActive"
                :each="eachContent"
              ></each-foul-quality>
            </operation-panel>
          </div>
          <div class="panel">
            <operation-panel title="污染物成分分析">
              <quality-analyze-chart
                v-if="isSonActive"
                typeOf="foul"
                :content="foulContent"
              ></quality-analyze-chart>
            </operation-panel>
          </div>
        </div>
        <div class="middle">
          <operation-overview
            v-if="isSonActive"
            :weekOverviewData="weekOverviewData"
            :dayOverviewData="dayOverviewData"
          ></operation-overview>
        </div>
        <div class="area-choice">
          <area-option></area-option>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  background-size: cover;
  height: 100vh;
  background-color: rgba(29, 43, 86, 1);
  .el-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    line-height: 60px;
    font-size: 18px;
    .el-dropdown__box {
      display: flex;
      align-items: center;
      .el-icon {
        color: #999;
        margin-left: 10px;
      }
      &:active,
      &:focus {
        outline: none;
      }
    }
  }
  .el-main {
    padding: 5px;
    .main {
      width: 100%;
      height: 100%;
      position: relative;
      .area-choice {
        position: absolute;
        left: 39%;
        top: 2px;
        width: 22%;
        height: 6%;
      }
      .map-form {
        width: 100%;
        height: 100%;
      }
      .column:nth-child(2) {
        position: absolute;
        height: 100%;
        width: 28%;
        left: 0px;
        top: 0px;
      }
      .column:nth-child(3) {
        position: absolute;
        height: 100%;
        width: 28%;
        right: 0px;
        top: 0px;
      }
      .column {
        padding: 5px;
        display: flex;
        flex-direction: column;
        .panel {
          height: 48%;
          width: 100%;
          margin-bottom: 15px;
        }
      }
      .middle {
        position: absolute;
        bottom: 1%;
        left: 30%;
        width: 40%;
        height: 17%;
      }
    }
  }
}
</style>